import React from 'react'
import '../App.css'
import { Radio } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import axios from 'axios'
export default function Register() {
    const navigate = useNavigate()
    const [iphone, setIphone] = React.useState('1732063361')
    const [val1, setval1] = React.useState('')
    const go = async () => {
        const res = await axios.post('http://127.0.0.1:3000/getCode', { phone: iphone });
        console.log(res);
        localStorage.setItem('code', res.data.code)
    }
    return (
        <div>
            <div >
                <p style={{ textAlign: 'center', marginTop: '50px' }}>
                    <img src='/img/3.jpg' style={{ width: '65px', height: '57px' }} />
                </p>
                <p style={{ textAlign: 'center', marginTop: '30px', fontWeight: 'bold' }}>
                    登录账号
                </p>
                <div style={{ width: '90%', height: 'auto', margin: '40px auto' }}>
                    <p style={{ marginBottom: '25px' }}>
                        <input type="text" placeholder='+ 86' style={{
                            width: '20%',
                            border: '1px solid #d0d0d0',
                            padding: '10px 15px',
                            boxSizing: 'border-box',
                            borderRadius: '7px 0px 0px 7px'
                        }} />
                        <input type="text" placeholder='请输入手机号码' style={{
                            width: '80%',
                            border: '1px solid #d0d0d0',
                            padding: '10px 15px',
                            boxSizing: 'border-box',
                            borderRadius: '0px 7px 7px 0px'
                        }} />

                    </p>
                    <p style={{ marginBottom: '25px' }}>
                        <input type="text" placeholder='请输入验证码'
                            onChange={(e) => {
                                setval1(e.target.value)

                            }}
                            value={val1}
                            style={{
                                width: '70%',
                                border: '1px solid #d0d0d0',
                                padding: '10px 15px',
                                boxSizing: 'border-box',
                                borderRadius: '7px 0px 0px 7px'
                            }} />
                        <button
                            style={{
                                width: '30%',
                                padding: '10px 15px',
                                boxSizing: 'border-box',
                                fontSize: '12px',
                                border: '1px solid #d0d0d0',
                                borderRadius: '0px 7px 7px 0px',
                                background: 'white',
                                color: '#0078ff',
                                fontWeight: 'bold'
                            }}
                            onClick={() => {
                                go()
                            }}
                        >
                            获取验证码
                        </button>
                    </p>
                    <p style={{ marginBottom: '25px' }}>
                        <input type="password" placeholder='请输入密码' style={{
                            width: '100%',
                            border: '1px solid #d0d0d0',
                            padding: '10px 15px',
                            boxSizing: 'border-box',
                            borderRadius: '7px'
                        }} />

                    </p>
                </div>

                <div style={{ width: '90%', height: 'auto', margin: '40px auto', display: 'flex', alignItems: 'center' }}>
                    <Radio value="1" />
                    <p style={{ marginLeft: '10px' }}><span>我已阅读并同意</span><span style={{ color: '#0078ff', fontWeight: 'bold' }}>《用户隐私政策》</span></p>
                </div>
                <div style={{ width: '90%', height: 'auto', margin: '0 auto' }}>
                    <button onClick={() => {
                        let val = localStorage.getItem('code')
                        if (val1 == val) {
                            navigate('/index')
                        }
                        else {
                            console.log('失败')
                        }
                    }} style={{
                        width: '100%',
                        color: 'white',
                        fontWeight: 'bold',
                        background: '#0078ff',
                        borderRadius: '7px',
                        padding: '10px 15px',
                        boxSizing: 'border-box',
                        border: 'none'
                    }}>

                        立即登录
                    </button>
                </div>

                <p style={{ textAlign: 'center', color: '#0078ff', fontWeight: 'bold', marginTop: '35px' }}>已有账号，去登录</p>
                <div style={{ marginTop: '45px' }}>
                    <p style={{ fontSize: '12px', color: 'gray', textAlign: 'center' }}>———————— 其他方式登录 ————————</p>
                    <p style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-evenly', }}>
                        <img src='/img/4.jpg' style={{ width: '80px', height: '60px' }} />
                        <img src='/img/5.jpg' style={{ width: '69px', height: '55px' }} />
                    </p>
                </div>
            </div>
        </div>





    )
}
